<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="format-detection" content="telephone=no">
   #parse("/h5/common/webWords.html")
   <link rel="stylesheet" type="text/css" href="http://${staticHost}/css/medioadaption.css">
   <link rel="stylesheet" type="text/css" href="http://${staticHost}/css/stcss.css">
   <script type="text/javascript" src="http://${staticHost}/js/jquery.js"></script>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="http://${staticHost}/js/layer.js"></script>
   <style type="text/css">

      .over {
         display: none;
         position: absolute;
         top: 240px;
         left: 0;
         width: 100%;
         height: 800px;
         background-color: #f5f5f5;
         opacity:0.5;
         z-index: 1000;
      }

      .layout {
         display: none;
         position: absolute;
         top: 240px;
         left: 40%;
         width: 20%;
         height: 20%;
         z-index: 1001;
         text-align:center;
      }
   </style>
   <script type="text/javascript">
       function showMessage(msg){
           layer.open({
               content: msg
               ,btn: '关闭'
           });
       }
       $(document).ready(function(){
           $("#submitUserRegister").click(function(){
               var phoneNumber = $("#phoneNumber").val();
               var userName = $("#userName").val();
               var password = $("#password").val();
               var recommendationCode = $("#recommendationCode").val();
               var passwordAgain = $("#passwordAgain").val();
               var imgCode = $("#imgCode").val();
               var uuid = $("#uuid").val();
               if(phoneNumber == '' ){
                   checkPassword = false;
                   $("#phoneNumberDiv").text("梦想在线提示您:请输入正确的手机号码");
               }
               if(userName == ''){
                   checkPassword = false;
                   $("#userNameDiv").text("梦想在线提示您:请输入真实的姓名");
               }
               if(password == ''){
                   checkPassword = false;
                   $("#passwordDiv").text("梦想在线提示您:请输入密码");
               }
               if(passwordAgain == '' && checkPassword){
                   checkPassword = false;
                   $("#passwordAgainDiv").text("梦想在线提示您:密码不一致,请重新输入");
               }
               if(imgCode == ''){
                   checkPassword = false;
                   showMessage("请输入图片验证码!");
               }
               if(checkPassword && checkPhone && checkName){
                   showLoading();
                   $.ajax({
                       type:'post',
                       url:'${requestHost}/edu/public/register',
                       contentType:'application/x-www-form-urlencoded; charset=utf-8',
                       data:{
                           phoneNumber:phoneNumber,
                           userName:userName,
                           password:password,
                           passwordAgain:passwordAgain,
                           imgCode:imgCode,
                           recommendationCode:recommendationCode,
                           uuid:uuid
                       },
                       success: function (result) {
                           if(result.status == '00000000'){
                               showMessage("注册成功");
                               window.location.href='/';
                           }else if(result.status == '200000002'){
                               hideLoading();
                               changeCode();
                               $("#phoneNumberDiv").text(result.message);
                           } else{
                               hideLoading();
                               changeCode();
                               showMessage(result.message);
                           }
                           hideLoading();
                           changeCode();
                       }
                   });
               }
           });

           var checkPassword, checkPhone, checkName = true;

           $("#phoneNumber").blur(function(){
               checkPhone = true;
               $("#phoneNumberDiv").text("");
               var reg=/^1[3|4|5|7|8][0-9]\d{8}$/;
               var phoneNumber = $("#phoneNumber").val();
               if(phoneNumber == '' || !reg.exec(phoneNumber) ){
                   checkPhone = false;
                   $("#phoneNumberDiv").text("梦想在线提示您:请输入正确的手机号码");
                   return;
               }
           });

           $("#userName").blur(function(){
               checkName = true;
               $("#userNameDiv").text("");
               var userName = $("#userName").val();
               if(userName == ''){
                   checkName = false;
                   $("#userNameDiv").text("梦想在线提示您:请输入真实的姓名");
               }
           });

           $("#password").blur(function(){
               checkPassword = true;
               $("#passwordDiv").text("");
               var password = $("#password").val();
               if(password == ''){
                   checkPassword = false;
                   $("#passwordDiv").text("梦想在线提示您:请输入密码");
               }
               var password = $("#password").attr("checkStatus");
               if(password == 1){
                   checkPasswordFnc();
               }

           });

           $("#passwordAgain").blur(function(){
               checkPassword = true;
               checkPasswordFnc();
           });

           function checkPasswordFnc(){
               $("#passwordAgainDiv").text("");
               var password = $("#password").val();
               var passwordAgain = $("#passwordAgain").val();
               $.ajax({
                   type:'post',
                   url:'${requestHost}/edu/public/checkPassword',
                   contentType:'application/x-www-form-urlencoded; charset=utf-8',
                   data:{
                       password:password,
                       passwordAgain:passwordAgain
                   },
                   success: function (result) {
                       $("#password").attr("checkStatus", "1");
                       if(result.status == '200000001'){
                           checkPassword = false;
                           $("#passwordAgainDiv").text(result.message);
                       }else{
                           checkPassword = true;
                       }
                   }
               });
           }
           getCode();
       });
       
       function changeCode(){
    	   getCode();
       }
       
       function getCode(){
      		$.ajax({
                  url:"/public/api/ImgCode",
                  type:"POST", 
                  error:function(xmlHttpRequest, error) { // 设置表单提交出错
                  	console.log(error);
                  },
                  success:function(data) {
                  	   var uuid=data.uuid;
                      var imgStr=data.imgStr;
                      var src = "data:image/jpeg;base64,"+imgStr;	
                      $("#code").attr("src",src);
                      $("#uuid").val(uuid);
                  }
              });
      	}


       function showLoading(){
           document.getElementById("over").style.display = "block";
           document.getElementById("layout").style.display = "block";
       }

       function hideLoading(){
           document.getElementById("over").style.display = "none";
           document.getElementById("layout").style.display = "none";
       }
   </script>
</head>


<body style="background-color:#f8f8f8;">
<div id="over" class="over"></div>
<div id="layout" class="layout"><img src="http://${staticHost}/images/loading.gif" /></div>
<!--<div class="dlhead clear">注册</div>-->
<div class="md_zcbg"><img src="http://${staticHost}/images/grzcbg.jpg"></div>
<input type="hidden" id="recommendationCode" value="$!{recommendationCode}">
<div class="dlmain">
   <dl>
      <dt>手机号*：</dt>
      <dd>
          <input type="text" name="phoneNumber" id="phoneNumber" class="wb70" value="" ><div style="color:#dc5c5c" id="phoneNumberDiv"></div>
      </dd>  
   </dl>
   <dl>
      <dt>姓名*：</dt>
      <dd>
          <input type="text" name="userName" id="userName" class="wb70" value="" ><div style="color:#dc5c5c" id="userNameDiv"></div>
      </dd>  
   </dl>
   <dl>
      <dt>密码*：</dt>
      <dd>
          <input type="password" name="password" id="password" checkStatus="" class="wb70" value="" ><div style="color:#dc5c5c" id="passwordDiv"></div>
      </dd>  
   </dl>
   <dl>
      <dt>确认密码*：</dt>
      <dd>
          <input type="password" name="passwordAgain" id="passwordAgain" class="wb70" value="" ><div style="color:#dc5c5c" id="passwordAgainDiv"></div>
      </dd>  
   </dl>
   <dl>
   		<dt>图片验证码*:</dt>
   	    <input type="hidden" name="uuid" id="uuid" value="" />
   	    <dd>
          <input type="text" name="imgCode" id="imgCode" style="width: 50%;" class="wb70" value="" ><div style="color:#dc5c5c" id="imgCode"></div>
          <img id="code" src="" onclick="changeCode()" style="width: 38%;height: 30px;margin-top: -18%;margin-left: 54%;"/>
      </dd>  
   </dl>
   <dl style="text-align:center;">
      <input name="" type="image" id="submitUserRegister" src="http://${staticHost}/images/05.jpg" style="width:290px; height:42px; border:none; margin-top:5px;" isclick="0" />
   </dl>
</div>
<div class="yiyou clear">若已有账号，请点击<a href="${requestHost}/edu/public/toLogin" id="toLogin">登录</a></div>
</body>
</html>